<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>考勤表</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <script src="/layui/layui.js"></script>
</head>
<!--头部工具栏-->
<script type="text/html" id="toolbarAtt" lay-event="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-xs" id="attInsert">导入考勤表</button>
    </div>
</script>

<body>
<!--条件查询-->
<form class="layui-form" style="margin-top: 10px;margin-left: 10px">
    <div class="layui-inline">
        日期：
        <div class="layui-input-inline">
            <input type="text" name="attendanceTime" id="date" placeholder="yyyy-MM-dd" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <button class="layui-btn" lay-submit lay-filter="selectConditionFilter" data-type="reload">搜索</button>
    <button type="reset" class="layui-btn layui-btn-normal" id="reset">重置</button>
</form>
<table id="attendance" lay-filter="attendanceTableFilter"></table>
</body>
<script>
    layui.use(['jquery', 'table', 'form', 'laydate', 'upload'], function () {
        let $ = layui.jquery;
        let table = layui.table;
        let laydate = layui.laydate;
        let form = layui.form;
        let upload = layui.upload;

        //日期
        laydate.render({
            elem: '#date'
        });

        let attendanceTable = table.render({
            elem: '#attendance'
            , height: 530
            , url: '/attendance/queryAll' //数据接口
            ,page: false //开启分页，默认向后台发两个参数page和limit
            ,limit:100000000
            , toolbar: "#toolbarAtt"
            , cols: [
                [ //表头
                    {field: 'loginName', title: '员工姓名', width: 120}
                    , {field: 'checkIn', title: '签到时间', width: 200}
                    , {field: 'checkOut', title: '签退时间', width: 200}
                    , {field: 'inStatus', title: '迟到状态', width: 120,
                    templet: function (tb) {
                        if (tb.inStatus == true) {
                            return "迟到";
                        } else {
                            return "未迟到";
                        }
                    }}
                    , {field: 'outStatus', title: '早退状态', width: 120,
                    templet: function (tb) {
                        if (tb.outStatus == true) {
                            return "早退";
                        } else {
                            return "未早退";
                        }
                    }}
                ]
            ]
        });

        //表单提交
        form.on('submit(selectConditionFilter)', function (data) {
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            attendanceTable.reload({
                where: { //设定异步数据接口的额外参数，任意设
                    attendanceTime: data.field.attendanceTime
                    //…
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //选择excel文件
        upload.render({
            elem: '#attInsert'
            , accept: 'file' //普通文件
            // , exts: 'txt|dat'
            , url: '/attendance/importAttendance' //上传接口
            , done: function (res) {
                if (res.code === 0) {
                    layer.msg('导入成功');
                    attendanceTable.reload({
                        page: {
                            curr: 1
                        }
                    });
                } else {
                    layer.msg('导入失败');
                }
            }
        });

        $("#reset").click(
            function () {
                attendanceTable.reload({
                    where: {
                        attendanceTime: '',
                    }
                });
            }
        );
    });
</script>
</html>